<template>
	<view class="form">
		<u-form :model="form" ref="uForm" :error-type="errorType">
			<u-form-item label="手机号" prop="Phone" label-width="50px">
				<u-input v-model="form.Phone" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item label="原始密码" prop="userPwd" label-width="65px">
				<u-input v-model="form.userPwd" placeholder="请输入原始密码" :type="Pwdtype" />
			</u-form-item>
			<u-form-item label="新密码" prop="newPwd" label-width="55px">
				<u-input v-model="form.newPwd" type="password" placeholder="请输入6~15位新密码" :type="Pwdtype" />
			</u-form-item>
			<u-form-item label="确定新密码" prop="confirmPwd" label-width="85px">
				<u-input v-model="form.confirmPwd" type="password" placeholder="请确认新密码" :type="Pwdtype" />
			</u-form-item>
		</u-form>
		<u-button @click="submit" type="success" class="btn_SureUpd">确定修改</u-button>
	</view>
</template>


<script>
	import mapGetters from 'vuex'
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback();
				} else {
					// if (this.form.confirmPwd !== '') {
					// 	// this.$refs.uForm.validateField('confirmPwd');
					// 	callback(new Error('请输入新密码'));
					// }
					callback();
				}
			};
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback();
				} else if (value !== this.form.newPwd) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			return {
				errorType: ['toast'],
				Pwdtype: 'password',
				form: {
					Phone: '',
					intro: '',
				},
				rules: {
					Phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					userPwd: [{
						required: true,
						message: '请输入原密码',
						trigger: ['change', 'blur']
					}],
					newPwd: [{
							required: true,
							message: '请输新入新密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 16,
							message: '长度在 6 到 12 个字符',
							trigger: 'blur'
						},
						{
							validator: validatePass,
							trigger: 'blur'
						}
					],
					confirmPwd: [{
							required: true,
							message: '请再次输入新密码',
							trigger: 'blur'
						},
						{
							min: 6,
							max: 16,
							message: '长度在 6 到 12 个字符',
							trigger: 'blur'
						},
						{
							validator: validatePass2,
							trigger: 'blur',
							required: true
						}
					]
				}
			};
		},
		computed: {
			userId() {
				return this.$store.getters.getId;
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.request({
							url: "/api/users/updUserPwd",
							data: {
								userId: this.userId,
								userPwd: this.form.confirmPwd
							},
							method: 'POST',
							success: (res) => {
								this.$store.dispatch("LogOut").then(response => {
									uni.showToast({
										title: '修改成功，请重新登录',
										icon: 'success',
										duration: 1000
									});
									setTimeout(function() {
										uni.reLaunch({
											url: '/pages/my/loginAndReg/login'
										})
									}, 1000)								
								})
							},
							fail: (error) => {
								uni.showToast({
									title: '网络或接口出现错误',
									icon: 'none'
								});
							}
						})
					} else {

					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>

<style scoped>
	.form {
		margin: 0rpx 15rpx;
	}

	.btn_SureUpd {
		margin-top: 25rpx;
		width: 250rpx;
	}
</style>
